import gcjEncrypt from '@/utils/handle-location';
import { ModalForm } from '@ant-design/pro-components';
import { Map, Marker } from 'react-amap';
import { amapKey } from '@/utils/amap';

interface PatrolMapProps {
  patrolDeviceSN: string;
  ownerName: string;
  location: number[];
}

export default (props: PatrolMapProps) => {
  const { patrolDeviceSN, ownerName, location } = props;
  const coordinate = gcjEncrypt(location[1], location[0]);
  const position = { longitude: coordinate.lon, latitude: coordinate.lat };
  return (
    <ModalForm
      title={`巡检设备 ${patrolDeviceSN} (${ownerName})`}
      submitter={false}
      width="55vw"
      modalProps={{
        destroyOnClose: true,
      }}
      trigger={<a>{patrolDeviceSN}</a>}
    >
      <div style={{ width: '100%', height: '50vh' }}>
        <Map
          plugins={['Scale', 'ToolBar']}
          amapkey={amapKey}
          zoom={18}
          center={{
            lng: coordinate.lon,
            lat: coordinate.lat,
          }}
        >
          <Marker position={position} />
        </Map>
      </div>
    </ModalForm>
  );
};
